<template>
  <div id="page-club">
    <h2>会员详细信息</h2>

    <Card>
      <Form
        ref="form"
        :model="form.data"
        :label-width="120"
        class="club-info-form mt20">
        <Row>
          <Col span="24">
            <FormItem prop="imageHeadPath" label="头像">
              <div class="avator-bg avator-bg-md-1"
                :style="{ backgroundImage: 'url(' + splitImg(form.data.imageHeadPath)[0].url + ')'}">
              </div>
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span="11">
            <FormItem prop="realName" label="姓名">
              {{ form.data.realName }}
            </FormItem>
            <FormItem prop="sex" label="性别">
              {{ form.data.sex === '1' ? '男' : '女' }}
            </FormItem>
            <FormItem prop="cardTypeName" label="证件类型">
              {{ form.data.cardTypeName }}
            </FormItem>
          </Col>
          <Col span="11" offset="2">
            <FormItem prop="nickName" label="昵称">
              {{ form.data.nickName }}
            </FormItem>
            <FormItem prop="mobile" label="手机号码">
              {{ form.data.mobile }}
            </FormItem>
            <FormItem prop="idCard" label="证件号码">
              {{ form.data.idCard }}
            </FormItem>
          </Col>
        </Row>
      </Form>
    </Card>

    <activity-list class="mt20"></activity-list>
  </div>
</template>

<script>
  import Vue from 'vue'
  import { mapGetters } from 'vuex'
  import vipApi from '@/api/vip'
  import activityList from './components/member/activity-list'

  export default {
    name: 'page-vip-member',
    components: {
      activityList
    },
    data () {
      let memberId = this.$route.params.memberId
      return {
        query: {
          pkRcId: null,
          pkMemberInfo: memberId
        },
        form: {
          data: {}
        }
      }
    },
    computed: {
      ...mapGetters({
        userInfo: 'userInfo'
      })
    },
    methods: {
      splitImg (str) {
        return Vue.filter('splitImg')(str || '', 0)
      },
      async detail () {
        this.query.pkRcId = this.userInfo.pkRclubInfo
        const { body } = await vipApi.memberDetail(this.query)
        const { responseData } = body
        if (this.$apiHelper.requestSuccessed(body.responseCode)) {
          this.form.data = responseData
          this.$route.params.pkUid = this.form.data.pkUid
        } else {
          setTimeout(() => {
            this.$Modal.error({
              title: '错误',
              content: body.desc,
              onOk: () => {}
            })
          }, 500)
        }
      }
    },
    async mounted () {
      this.$store.dispatch('getUserInfo')
      this.detail()
    }
  }
</script>

<style lang="less">
  .club-info-form {
    width: 80%;
    margin: 0px auto;
    margin-top: 20px;
  }
</style>

